<template>
  <div id="app">
    <!-- 模糊查询 -->
       <el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="">
    <el-input v-model="formInline.user_id" placeholder="请输入用户id"></el-input>
  </el-form-item>
  <el-form-item label="">
        <el-input v-model="formInline.keyword" placeholder="请输入关键字"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">查询</el-button>
  </el-form-item>
</el-form>
    <!-- 列表展示 -->
     <el-table
        border
        :data="tableData"
        style="background:red,width: 100%"
        :row-class-name="tableRowClassName"
        :default-sort = "{prop: 'date', order: 'descending'}"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="100"></el-table-column>
        <el-table-column prop="id" label="编号" sortable width="180"></el-table-column>
        <el-table-column prop="user_id" label="用户id" width="180"></el-table-column>
        <el-table-column prop="keyword" label="关键字" width="180"></el-table-column>
        <el-table-column prop="add_time" type="datetime" label="时间" width="180"></el-table-column>
    </el-table>
<!-- 分页 -->
     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total" >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      tableData: [],
      currentPage4:1,
      pageSizes:[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      pageSize:10,
      total:400,
      options:[],
      formInline: {
          user_id: '',
          keyword:''
        }
    }
  },
  methods:{
    // 列表展示
     getHistory(){
        var $this=this;
        this.axios({
            method:'get',
            url: 'http://localhost:8084/ecSearchHistory/getHistoryList',
            params:{pageNum:this.currentPage4,pageSize:this.pageSize}
        }).then(function(res){
            console.log("查询数据为:{}",res);
            $this.tableData=res.data.obj.list;
            $this.total=res.data.obj.total;
        });
      },
      // 分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.getHistory();


      },
       handleChange(value) {
      console.log(value);
    },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage4 = val;
        this.getHistory();
      }
      ,
      tableRowClassName({row, rowIndex}) {
         if(rowIndex === 0){
          return 'three-row';
        }
        else if (rowIndex === 1) {
          return 'success-row';
        } else if (rowIndex === 2) {
          return 'warning-row';
        }
        
        else if (rowIndex == 3) {
          return 'four-row';
        }
      },
      //全选
      handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log("点击复选框数据为:{}",this.multipleSelection);
      },
      onSubmit() {
      
        console.log('submit!');


         var $this = this;
            this.axios({
              method:'get',
              url: 'http://localhost:8084/ecSearchHistory/getHistoryList',
              params:this.formInline
            }).then(function(res){
                console.log(res);
                $this.tableData = res.data.obj.list;
                $this.total = res.data.obj.total;
            });
      },
  },
  mounted(){
    this.getHistory();
  }
}
</script>
